/**
 * 布局工具类
 * 基于 flex 布局，符合 ucss 规范
 */

/* Flex 布局 */
.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-nowrap {
	flex-wrap: nowrap;
}

/* 主轴对齐 */
.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}

.justify-evenly {
	justify-content: space-evenly;
}

/* 交叉轴对齐 */
.items-start {
	align-items: flex-start;
}

.items-end {
	align-items: flex-end;
}

.items-center {
	align-items: center;
}

.items-stretch {
	align-items: stretch;
}

.items-baseline {
	align-items: baseline;
}

/* Flex 子项 */
.flex-1 {
	flex: 1;
}

.flex-auto {
	flex: auto;
}

.flex-none {
	flex: none;
}

/* 注意：gap 属性在 ucss 中不支持，请使用 margin 工具类实现间距 */

/* 定位 */
.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.fixed {
	position: fixed;
}

/* 显示/隐藏 */
.hidden {
	display: none;
}

.block {
	display: block;
}

.inline {
	display: inline;
}

.inline-block {
	display: inline-block;
}

/* 宽度 - 动态数值生成（1-1000px，步进为1） */
.w-auto {
	width: auto;
}

.w-full {
	width: 100%;
}

// 生成 w-1 到 w-1000 的动态类
@for $i from 1 through 1000 {
	.w-#{$i} {
		width: #{$i}px;
	}
}

/* 高度 - 动态数值生成（1-1000px，步进为1） */
.h-auto {
	height: auto;
}

.h-full {
	height: 100%;
}

// 生成 h-1 到 h-1000 的动态类
@for $i from 1 through 1000 {
	.h-#{$i} {
		height: #{$i}px;
	}
}

/* z-index - 动态数值生成（常用范围） */
// 生成 z-0 到 z-100 的动态类
@for $i from 0 through 100 {
	.z-#{$i} {
		z-index: #{$i};
	}
}

// 生成常用的大数值 z-index
.z-998 {
	z-index: 998;
}

.z-999 {
	z-index: 999;
}

.z-1000 {
	z-index: 1000;
}

/* min-width - 动态数值生成 */
.min-w-0 {
	min-width: 0;
}

.min-w-full {
	min-width: 100%;
}

// 生成 min-w-1 到 min-w-1000 的动态类
@for $i from 1 through 1000 {
	.min-w-#{$i} {
		min-width: #{$i}px;
	}
}

/* max-width - 动态数值生成 */
.max-w-0 {
	max-width: 0;
}

.max-w-full {
	max-width: 100%;
}

// 生成 max-w-1 到 max-w-1000 的动态类
@for $i from 1 through 1000 {
	.max-w-#{$i} {
		max-width: #{$i}px;
	}
}

/* min-height - 动态数值生成 */
.min-h-0 {
	min-height: 0;
}

.min-h-full {
	min-height: 100%;
}

// 生成 min-h-1 到 min-h-1000 的动态类
@for $i from 1 through 1000 {
	.min-h-#{$i} {
		min-height: #{$i}px;
	}
}

/* max-height - 动态数值生成 */
.max-h-0 {
	max-height: 0;
}

.max-h-full {
	max-height: 100%;
}

// 生成 max-h-1 到 max-h-1000 的动态类
@for $i from 1 through 1000 {
	.max-h-#{$i} {
		max-height: #{$i}px;
	}
}

/* 溢出处理 */
.overflow-hidden {
	overflow: hidden;
}

.overflow-scroll {
	overflow: scroll;
}

.overflow-auto {
	overflow: auto;
}

.overflow-x-hidden {
	overflow-x: hidden;
}

.overflow-y-hidden {
	overflow-y: hidden;
}

.overflow-x-scroll {
	overflow-x: scroll;
}

.overflow-y-scroll {
	overflow-y: scroll;
}

